<template>
  <div class="demo">
    <div class="demo-title">拖拽上传</div>
    <div class="demo-content">
      <Upload.Dragger
        v-model:fileList="fileList"
        name="file"
        :multiple="true"
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        @change="handleChange"
        @drop="handleDrop"
      >
        <p class="ant-upload-drag-icon">
          <InboxOutlined />
        </p>
        <p class="ant-upload-text">Click or drag file to this area to upload</p>
        <p class="ant-upload-hint">
          Support for a single or bulk upload. Strictly prohibit from uploading company data or other
          band files
        </p>
      </Upload.Dragger>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { InboxOutlined } from '@ant-design/icons-vue';
  import Message from '@sscd/message';
  import Upload from '@sscd/upload';
  import type { UploadChangeParam } from '@sscd/upload';
  const handleChange = (info: UploadChangeParam) => {
    const { status } = info.file;
    if (status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (status === 'done') {
      Message.success(`${info.file.name} file uploaded successfully.`);
    } else if (status === 'error') {
      Message.error(`${info.file.name} file upload failed.`);
    }
  };
  const fileList = ref([]);
  const handleDrop = (e: DragEvent) => {
    console.log(e);
  };
</script>
